{include file='common/head'}
<div style="overflow-x: hidden;width: 96%;margin: auto;padding-top: 1rem;">
    <blockquote class="layui-elem-quote layui-text">
        <div class="demoTable layui-form">
            <div class="layui-input-inline">
                <input type="text" placeholder="请输入部门名称" name="depart_name" lay-verify="required|phone" autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn " data-type="reload" ><i class="layui-icon">&#xe615;</i>搜索</button>
            <button class="layui-btn addInfo " style="margin:0;"><i class="layui-icon">&#xe654;</i> 添加</button>
        </div>
    </blockquote>
    <div class="demoTable layui-for">
        <table class="layui-table" lay-data="{height:700, url:'{:url('admin/Depart/departList')}',edit:true, page:true, id:'testReload',loading:true}" lay-filter="demo">
            <thead>
            <tr>
                <th lay-data="{field:'id',width:200,fixed: true, templet: '#id'}">部门编号</th>
                <th lay-data="{field:'depart_name',width:200,fixed: true, templet: '#depart_name'}">部门名称</th>
                <th lay-data="{field:'created_ts',sort:true,width:200, fixed: true, templet: '#created_ts'}">添加时间</th>
                <th lay-data="{field:'update_ts', width:200, templet: '#update_ts'}">修改时间</th>
                <th lay-data="{field:'status', width:200, templet: '#status'}">状态</th>
                <th lay-data="{fixed: '', width:200,fixed: 'right', toolbar: '#barDemo'}">操作</th>
            </tr>
            </thead>
        </table>
        <script type="text/html" id="id">
            <span>{{d.id}}</span>
        </script>
        <script type="text/html" id="depart_name">
            <span>{{d.depart_name}}</span>
        </script>
        <script type="text/html" id="created_ts">
            <span>{{d.created_ts}}</span>
        </script>
        <script type="text/html" id="update_ts">
            <span>{{d.update_ts}}</span>
        </script>
        <script type="text/html" id="barDemo">
            <a title="编辑" lay-event="edit" href="#"><i class="layui-icon" style="font-size: 25px; color:#029587;line-height: 30px">&#xe642;</i></a>
            <a title="删除" lay-event="delete" href="#"><i class="layui-icon" style="font-size: 25px; color:#029587;line-height: 30px">&#xe640;</i></a>
        </script>
        <script type="text/html" id="contentTpl" lay-event="detail_content">
            <span>{{ d.describe }}</span>
        </script>
        <script type="text/html" id="status">
            {{#  if(d.status == 1){ }}
            <span style="color: #5FB878" >正常</span>
            {{#  } }}
            {{#  if(d.status == 2){ }}
            <span style="color: #FF5722" >异常</span>
            {{#  } }}
        </script>
    </div>
    {include file='common/footer'}
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
        layui.use(['table','form'], function(){
            var table = layui.table
                ,form = layui.form;
            var $ = layui.$, active = {
                reload: function(){
                    var depart_name = $('input[name="depart_name"]').val();
                    //执行重载
                    table.reload('testReload', {
                        where: {
                            depart_name:depart_name
                        }
                    });
                }
            };

            //监听表格复选框选择
            table.on('checkbox(demo)', function(obj){
                console.log(obj)
            });
            //监听工具条
            table.on('tool(demo)', function(obj){
                var data = obj.data;
                if(obj.event === 'edit'){
                    layer.open({
                        type: 2,
                        title: '编辑更新数据信息',
                        shadeClose: true,
                        shade: false,
                        maxmin: true, //开启最大化最小化按钮
                        area: ['893px', '400px'],
                        content: '{:url("Depart/saveDepartInfo")}?id='+data.id,
                        end: function () {
                            table.reload('testReload');
                        },
                    });
                }else if(obj.event === 'delete'){
                    layer.confirm('确定删除么?', function(index){
                        $.ajax({
                            url:'{:url("admin/Depart/departDel")}',
                            type:'post',
                            dataType:'json',
                            data: {'id':data.id},
                            success:function(val){
                                if(val.code == 200){
                                    obj.del();
                                    layer.msg(val.msg);
                                }
                                if(val.code == 400){
                                    layer.msg(val.msg);
                                }
                            }
                        });

                    });
                }
            });
            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            $('.addInfo').on('click', function() {
                layer.open({
                    type: 2,
                    title: '添加内容信息',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['893px', '400px'],
                    content: '{:url("Depart/saveDepartInfo")}',
                    end: function () {
                        table.reload('testReload');
                    },
                });
            });
        });
    </script>
    </body>
    </html>